<template>
  <div>
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-card>
      <el-button
        type="primary"
        class="button1"
        size="big"
        @click="gotoadd"
        v-if="$store.getters.getUserInfoRoleid == '1'"
        >添加商品</el-button
      >
      <tree-table
        class="treetable"
        :data="list"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
      >
        <!-- <template slot="isok" slot-scope="">
          <i class="el-icon-circle-check" style="color: lightgreen"></i>
          <i class="el-icon-circle-close" style="color: red"></i>
        </template> -->

        <!-- 级别 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" v-if="scope.row.cat_level === 1" type="success"
            >二级</el-tag
          >
        </template>
        <template slot-scope="scope" slot="opt">
          <!-- {{ scope.row.cat_id }} -->
          <el-button
            type="primary"
            size="small"
            @click="showGoodlistButton(scope.row)"
            >查看商品列表</el-button
          >

          <!-- <el-button
            type="danger"
            size="small"
            @click="deleteCateItem(scope.row)"
            >删除</el-button
          > -->
        </template>
      </tree-table>
    </el-card>

    <!-- 添加分类抽屉 -->
    <el-drawer
      title="我嵌套了 Form !"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <el-form
        class="elform"
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        width="90px"
      >
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父类:" prop="cat_pid">
          <!-- <el-input v-model="addForm.cat_pid"></el-input> -->
          <el-cascader
            expand-trigger="hover"
            :clearable="true"
            v-model="cascaderselectkey"
            :options="list"
            :props="cascaderprops"
            @change="cascaderChange"
            clearCheckedNodes
            :checkStrictly="true"
            placeholder="默认为最高级分类"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <el-row type="flex" gutter="10" style="margin-top: '10px'">
        <el-col span="12" offset="5"
          ><el-button @click="cancelAdd">取 消</el-button></el-col
        >
        <el-col span="12">
          <el-button type="primary" @click="sendAddList"
            >确定</el-button
          ></el-col
        >
      </el-row>
    </el-drawer>

    <!-- 商品列表对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-card>
        <el-table :data="goodslist" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="goods_name" label="商品名称">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
              &nbsp;
              <el-popover placement="right" trigger="click">
                <el-image
                  style="width: 200px; height: 200px"
                  :src="scope.row.picture"
                  fit="fill"
                ></el-image>
                <i class="el-icon-picture icon" slot="reference"></i>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="goods_number"
            label="商品数量"
          ></el-table-column>
          <el-table-column
            prop="goods_price"
            label="商品价格"
          ></el-table-column>
          <el-table-column
            prop="goods_weight"
            label="商品重量(kg)"
          ></el-table-column>
          <el-table-column
            prop="goods_introduce"
            label="商品介绍"
          ></el-table-column>

          <!-- <el-table-column v-slot="scope">
            {{ scope.row }}
          </el-table-column> -->
          <el-table-column v-slot="scope" label="操作" width="200">
            <template>
              <el-button
                type="primary"
                size="small"
                @click="editInfo(scope.row)"
                v-if="$store.getters.getUserInfoRoleid == '1'"
                >修改商品</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delgood(scope.row.goods_id)"
                v-if="$store.getters.getUserInfoRoleid == '1'"
                >删除</el-button
              >
              <el-button v-if="$store.getters.getUserInfoRoleid != 1">
                你没有权限噢
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>

    <!-- 修改商品对话框 -->
    <el-drawer
      title="我嵌套了 Form !"
      :visible.sync="dialog2"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
    >
      <el-form
        class="elform"
        :model="editform"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
        width="100px"
      >
        <el-form-item label="商品名" prop="goods_name">
          <el-input v-model="editform.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="editform.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="editform.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量（kg）" prop="goods_weight">
          <el-input v-model="editform.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goods_introduce">
          <el-input
            type="textarea"
            label="商品介绍"
            placeholder="商品介绍"
            v-model="editform.goods_introduce"
            maxlength="30"
            :rows="4"
            show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>

      <el-row type="flex" gutter="10" style="margin-top: '10px'">
        <el-col span="12" offset="5"
          ><el-button @click="dialog2 = !dialog2">取 消</el-button></el-col
        >
        <el-col span="12">
          <el-button type="primary" @click="editGood">确定</el-button></el-col
        >
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查看商品列表 -- 商品列表
      goodslist: [],
      // 商品列表显示
      dialogVisible: false,

      // 修改商品对话框显示
      dialog2: false,
      // 修改商品form
      editform: {
        goods_name: "1",
        goods_price: "1",
        goods_number: "1",
        goods_weight: "1",
        //商品所属的 分类数组
        goods_cat: [],
        //商品介绍
        goods_introduce: "商品介绍",
      },

      // 商品分类数据
      List0: [],
      list00: [],
      List1: [],
      list: [],

      // 添加分类
      dialog: false,
      addForm: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      addFormRules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      // 级联选择器 对象表
      cascaderprops: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true,
      },
      // 级联选中的东东 ,同时 级联一改变 就会触发cascaderChange
      cascaderselectkey: [],

      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        // {
        //   label: "是否有效",
        //   type: "template",
        //   template: "isok",
        // },
        // {
        //   label: "分类级别",
        //   type: "template",
        //   template: "order",
        // },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  async created() {
    this.resetPage();
  },
  mounted() {
    this.flag = true;
  },
  methods: {
    // d点击 -删除商品
    async delgood(id) {
      console.log(id);
      const { data } = await this.axios({
        method: "delete",
        url: `/goods/delgood/${id}`,
      });
      console.log(data);
      if (data.meta.status === 200) {
        this.$message.success("删除成功");
      } else {
        this.$message.error("删除失败");
      }
      this.resetPage();
      // this.dialog2 = !this.dialog2;
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击 -修改商品 -确定
    async editGood() {
      // console.log(this.editform);
      const { data } = await this.axios({
        method: "put",
        url: "/goods/updategood",
        data: this.editform,
      });
      console.log(data);
      if (data.meta.status === 200) {
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.resetPage();
      this.dialog2 = !this.dialog2;
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击 -修改商品
    editInfo(row) {
      console.log(row);
      this.dialog2 = !this.dialog2;
      this.editform = Object.assign(this.editform, row);
      console.log(this.editform);
    },
    // 点击 -展示商品列表
    async showGoodlistButton(row) {
      // console.log(row);
      const { data } = await this.axios({
        url: "/goods/getGoodlist",
        method: "get",
        params: {
          cat_id: row.cat_id,
          level: row.cat_level,
        },
      });
      // console.log(data);
      this.goodslist = data;
      console.log(this.goodslist);
      // 打开商品列表table
      this.dialogVisible = !this.dialogVisible;
    },
    gotoadd() {
      this.$router.push("/home/add");
    },
    async resetPage() {
      await this.getList0();
      await this.getList1();
      await this.list1AddtoList0();
      console.log(this.list);
    },
    // 添加分类
    // 取消添加
    cancelAdd() {
      this.$refs.addFormRef.resetFields();
      this.dialog = !this.dialog;
    },
    // 级别联合改变
    cascaderChange() {
      console.log(this.cascaderselectkey);
      if (this.cascaderselectkey.length > 0) {
        this.addForm.cat_pid = this.cascaderselectkey[
          this.cascaderselectkey.length - 1
        ];
        this.addForm.cat_level = 1;
        // console.log(this.addForm);
        // {
        //   cat_level: 1;
        //   cat_name: "111";
        //   cat_pid: 5;
        // }
      } else {
        this.addForm.cat_level = 0;
        this.cat_pid = 0;
      }
    },
    // 添加分类 -确定
    async sendAddList() {
      console.log(this.addForm);
      const { data } = await this.axios({
        url: "/goods/addList",
        method: "post",
        data: this.addForm,
      });
      if (data.meta.status === 200) {
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
      this.$refs.addFormRef.resetFields();
      this.dialog = !this.dialog;
      this.resetPage();
    },

    async getList0() {
      const { data } = await this.axios({
        method: "get",
        url: "/goods/getList0",
      });
      // console.log(data);
      this.list = data;
      console.log(this.list);
      return data;
      // console.log(this.list);
    },
    async getList1() {
      const { data: res1 } = await this.axios({
        method: "get",
        url: "/goods/getList1",
      });
      this.List1 = res1;
    },

    list1AddtoList0() {
      this.list.forEach((item0, index) => {
        item0.children = [];
        this.List1.forEach((item1) => {
          if (item1.cat_pid === item0.cat_id) {
            item1.disabled = "true";
            item0.children.push(item1);
          }
        });

        this.$set(this.list, index, item0);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.treetable {
  margin-top: 15px;
}
.el-cascader {
  width: 100%;
  // overflow: hidden;
}

.el-cascader-panel {
  height: 300px;
}
.el-icon-circle-check {
}
.button1 {
  margin-bottom: 25px !important;
}
.elform {
  margin-right: 50px;
}
</style>
